<template>
  <app-config-layout>
    <template #title>
      <span>会员配置</span>
    </template>
    <template #body>
      <div class="user_config">
        <div class="user_config_header">
          <div style="width: 130px">操作</div>
          <div style="width: 224px">来源平台</div>
          <div style="width: 224px">来源代理</div>
          <div style="flex: 1">来源用户</div>
        </div>

        <div
          class="user_config_item"
          v-for="(item, index) in copyconfig.source_users_config"
          :key="index"
          :style="index + 1 == copyconfig.source_users_config.length ? '' : 'border-bottom: 1px solid #eee;'"
        >
          <div class="user_config_operation">
            <div class="add_item" @click="addconfig(index)">
              <div>+</div>
            </div>
            <div class="reduce_item" @click="reduceconfig(index)">
              <div>-</div>
            </div>
          </div>
          <div class="user_config_bctype">
            <el-select
              v-model="item.bc_type"
              placeholder="来源平台"
              @change="getuserlist(index)"
              style="width: 100%"
            >
              <el-option
                v-for="(item2, index2) in platformlist"
                :key="index2"
                :label="item2.name"
                :value="item2.bc_type"
              />
            </el-select>
          </div>
          <div class="user_config_agent">
            <el-select
              v-model="item.agent"
              placeholder="来源代理"
              @change="getuserlist(index)"
              style="width: 100%"
            >
              <template v-for="(item2, index2) in agentlist" :key="index2">
                <el-option
                  v-if="item2.bc_type == item.bc_type"
                  :label="item2.user_name"
                  :value="item2.user_name"
                />
              </template>
            </el-select>
          </div>
          <div class="user_config_user">
            <el-select
              v-model="item.user"
              placeholder="来源用户"
              multiple
              :max-collapse-tags="1"
              @change="changeuser(index)"
              collapse-tags
              style="width: 100%"
            >
              <el-option
                v-for="(item2, index2) in item.userlist"
                :key="index2"
                :label="item2.label"
                :value="item2.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </template>
  </app-config-layout>
</template>

<script setup>
import { http } from '@/utils/http'
import { computed, onMounted } from 'vue'

const props = defineProps({
  copyconfig: Object,
})

const platformlist = ref([])
const agentlist = ref([])
const userItem = ref({
  bc_type: '',
  agent: '',
  user: [],
  userlist: [],
})

const getplatformlist = () => {
  http.get('/read_list/get_platform_list').then(res => {
    platformlist.value = res.data
  })
}

const getagentlist = () => {
  http.get('/read_list/get_agent_list').then(res => {
    agentlist.value = res.data
  })
}

const addconfig = index => {
  let a = JSON.parse(JSON.stringify(userItem.value))
  props.copyconfig.source_users_config.splice(index + 1, 0, a)
}

const reduceconfig = index => {
  let newArray = props.copyconfig.source_users_config.filter((_, idx) => idx !== index)
  props.copyconfig.source_users_config = newArray
}

const getuserlist = index => {
  if (
    props.copyconfig.source_users_config[index].bc_type != '' &&
    props.copyconfig.source_users_config[index].agent != ''
  ) {
    let body = {
      bc_type: props.copyconfig.source_users_config[index].bc_type,
      agent: props.copyconfig.source_users_config[index].agent,
    }
    props.copyconfig.source_users_config[index].user = ''
    props.copyconfig.source_users_config[index].userlist = []
    http.post('/read_list/get_order_option', body).then(res => {
      props.copyconfig.source_users_config[index].userlist = res.data.member_option.options
    })
  }
}

const changeuser = index => {
  let a = []
  props.copyconfig.source_users_config[index].userlist.forEach(item => {
    if (props.copyconfig.source_users_config[index].user.includes(item.value)) {
      a.push(item)
    }
  })
  props.copyconfig.source_users_config[index].users = a
}

onMounted(() => {
  getplatformlist()
  getagentlist()
})
</script>

<style lang="scss" scoped>
.user_config {
  border: 1px solid #eee;
  margin-bottom: 24px;
}
.user_config_header {
  display: flex;
  background-color: #fafafa;
  color: #778090;
  height: 40px;
  align-items: center;

  div {
    padding-left: 16px;
  }
}

.user_config_item {
  display: flex;
  padding: 12px 0;
}
.user_config_operation {
  width: 130px;
  padding-left: 16px;
  display: flex;
}
.user_config_bctype {
  width: 224px;
  padding-left: 16px;
}
.user_config_agent {
  width: 224px;
  padding-left: 16px;
}
.user_config_user {
  flex: 1;
  padding: 0 16px;
}

.reduce_item,
.add_item {
  width: 24px;
  height: 24px;
  border: solid 1px #ebebeb;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 12px;
}
.reduce_item div {
  font-size: 24px;
  margin-top: -4px;
}
.add_item div {
  font-size: 24px;
  margin-top: -4px;
}
</style>